<template>
  <view class="recruitment-detail">
    <view class="detail-content">
      <!-- 2.1 基础信息卡片 -->
      <view class="base-info-card">
        <view class="info-item">
          <text class="info-label">名称：</text>
          <text
            class="info-value"
            style="font-size: 30rpx; font-weight: bolder"
            >{{ dataList.title || "未填写" }}</text
          >
        </view>
        <!-- 企业名称 -->

        <view class="info-item">
          <text class="info-label">企业名称：</text>
          <text class="info-value">{{
            dataList.company_name || "未填写"
          }}</text>
        </view>

        <!-- 发布人 -->
        <view class="info-item">
          <text class="info-label">发布人：</text>
          <text class="info-value">{{ dataList.username }}</text>
        </view>

        <!-- 发布时间 -->
        <view class="info-item">
          <text class="info-label">发布时间：</text>
          <text class="info-value">{{ formatTime(dataList.created_at) }}</text>
        </view>
        <!-- <view class="info-item" v-if="state.userinfo.company_type == 3">
          <text class="info-label">状态：</text>
          <view
            class="status-tag "
            :class="
              dataList.audit_status == 3 ? 'status-error' : 'status-active'
            "
          >
            {{ dataList.audit_status_name }}
          </view>
        </view> -->
        <!-- 需求状态 -->
        <view class="info-item">
          <text class="info-label">找人状态：</text>
          <view
            class="status-tag"
            :class="dataList.status == 1 ? 'status-active' : 'status-inactive'"
          >
            {{ dataList.status === 1 ? "正在找人" : "停止找人" }}
          </view>
        </view>
        <view class="info-item">
          <text class="info-label">找人类型：</text>
          <view
            class="status-tag"
            :class="dataList.status == 1 ? 'status-active' : 'status-inactive'"
          >
            {{ dataList.job_type == 1 ? "全职" : "兼职" }}
          </view>
        </view>
        <view class="info-item">
          <text class="info-label">经验要求：</text>
          <view class="status-tag">
            {{ dataList.history_need }}
          </view>
        </view>
        <view class="info-item">
          <text class="info-label">最低学历：</text>
          <view
            class="status-tag"
            :class="dataList.status == 1 ? 'status-active' : 'status-inactive'"
          >
            {{ dataList.xue_li_need }}
          </view>
        </view>
        <view class="info-item">
          <text class="info-label">薪资范围：</text>
          <view>
            {{ dataList.salary }}
          </view>
        </view>
        <view class="info-item">
          <text class="info-label">本信息截至日期：</text>
          <view>
            {{ dataList.show_end_date }}
          </view>
        </view>
        <!-- 关键词标签 -->
        <!-- <view class="info-item tags-container">
          <text class="info-label">找人关键词：</text>
          <view class="tags-list">
            <view
              class="tag-item"
              v-for="(tag, index) in dataList.sys_label_name?.split('，') || []"
              :key="index"
            >
              {{ tag }}
            </view>
          </view>
        </view> -->
      </view>

      <!-- 2.2 富文本内容区域（核心需求描述） -->
      <view class="content-title">
        <text>需求详情</text>
        <view class="title-line"></view>
      </view>
      <view class="rich-text-container">
        <!-- 富文本渲染：使用u-parse解析接口返回的HTML内容 -->
        <u-parse
          :content="dataList.content || '<p>暂无需求详情</p>'"
          :imageProp="{ mode: 'widthFix' }"
        />
      </view>
      <view v-if="userExt.length > 0">
        <view class="content-title" style="margin: 10px 0">
          <text>报名人员</text>
          <view class="title-line"></view>
        </view>
        <view
          class="base-info-card"
          style="margin-top: 10px"
          v-for="(item, index) in userExt"
          :key="index"
          @click="ClickUserExt(item)"
        >
          <view class="info-item">
            <text class="info-label">姓名：</text>
            <text class="info-value">{{
              item.userExt.realname || "未填写"
            }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">性别：</text>
            <text class="info-value">{{
              item.userExt.sex_name || "未填写"
            }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">住址：</text>
            <text class="info-value">{{
              item.userExt.city_name || "未填写"
            }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">注册类型：</text>
            <view class="tags-list">
              <view
                class="tag-item"
                v-for="(tag, index) in item.userExt.role_name?.split('，') ||
                []"
                :key="index"
              >
                {{ tag }}
              </view>
            </view>
          </view>
        </view>
        <!-- <view @click="ClickMore"> 查看更多 </view> -->
        <u-divider text="查看更多" :bold="true" @click="ClickMore"></u-divider>
      </view>

      <!-- 2.3 操作按钮区域（固定在底部） -->
      <view class="action-buttons" v-if="dataList.status != 2 && state.type">
        <u-button
          type="primary"
          text="停止找人"
          shape="circle"
          :customStyle="{
            width: '100%',
            height: '80rpx',
            fontSize: '28rpx',
            background: 'linear-gradient(135deg, #4A90E2 0%, #357ABD 100%)',
            border: 'none',
          }"
          @click="handleContact(1)"
          v-if="dataList.audit_status != 3"
        />
        <u-button
          v-else
          type="primary"
          text="修改找人"
          shape="circle"
          :customStyle="{
            width: '100%',
            height: '80rpx',
            fontSize: '28rpx',
            background: 'linear-gradient(135deg, #4A90E2 0%, #357ABD 100%)',
            border: 'none',
          }"
          @click="handleContact(2)"
        />
      </view>
      <view class="action-buttons" v-if="state.userinfo.company_type == 1">
        <u-button
          v-if="dataList.bao_is == 0"
          type="primary"
          text="立即报名"
          shape="circle"
          :customStyle="{
            width: '100%',
            height: '80rpx',
            fontSize: '28rpx',
            background: 'linear-gradient(135deg, #4A90E2 0%, #357ABD 100%)',
            border: 'none',
          }"
          @click="ClickApply"
        />
        <u-button
          v-if="dataList.bao_is == 1"
          type="primary"
          text="已报名"
          shape="circle"
          :customStyle="{
            width: '100%',
            height: '80rpx',
            fontSize: '28rpx',
            background: 'linear-gradient(135deg, #4A90E2 0%, #357ABD 100%)',
            border: 'none',
          }"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
import {
  GetZhaoPinRead,
  PutStop,
  PostZhaoPinBao,
  GetZhaoPinBao,
} from "@/api/news.js";
import {
  showToast,
  showLoading,
  hideLoading,
  showModalNoCancel,
  showModal,
} from "@/utils/toast";
import { formatTime } from "@/utils/data.js";
import { onLoad, onShow } from "@dcloudio/uni-app";
// 1. 状态管理
const state = reactive({
  count: "",
  userinfo: {},
  type: true,
  id: null, // 需求ID（从页面参数获取）
  dataList: { company_name: "" }, // 详情数据（接口返回）
  userExt: [],
  form: {
    page_no: 1,
    page_size: 10,
    page_count: 1,
    zhao_pin_id: "",
  },
});
const { dataList, userExt, form } = toRefs(state);

// 2. 页面加载：获取需求ID并请求详情数据
onLoad(async (e) => {
  state.userinfo = uni.getStorageSync("userinfo") || null;
  if (e.id) {
    state.id = e.id;
    form.value.zhao_pin_id = e.id;
    // await second();
    if (e.type == 1) {
      state.type = false;
    } else {
      await init();
    }
  }
});
onShow(async () => {
  if (state.id) {
    await second();
  }
});

// 3. 请求详情数据
const init = async () => {
  try {
    const res = await GetZhaoPinBao(form.value);
    state.count = res.data.count;
    userExt.value = [...userExt.value, ...res.data.data];
  } catch (error) {}
};
const second = async () => {
  try {
    const res = await GetZhaoPinRead({ id: state.id });
    state.dataList = res.data; // 赋值详情数据
  } finally {
  }
};
const goBack = () => {
  uni.navigateBack({ delta: 1 });
};

const handleContact = async (e) => {
  if (e == 1) {
    try {
      const res = await PutStop({ id: state.id });
      if (res.code == 10000) {
        showToast("提交成功");
        setTimeout(() => {
          goBack();
        }, 500);
      }
    } catch (error) {}
  } else {
    uni.navigateTo({
      url: `/pages/user/component/recruit/recruitForm?id=${dataList.value.id}`,
    });
  }
};
const ClickApply = async () => {
  showModal(
    {
      title: "系统提示",
      content: "您确定要报名此找人？",
      confirmText: "确定报名",
      cancelText: "稍后再说",
    },
    async (result) => {
      if (result.error) {
        showToast("操作失败，请重试");
        return;
      }
      if (result.confirm) {
        try {
          console.log({ zhao_pin_id: dataList.value.id });

          const res = await PostZhaoPinBao({ zhao_pin_id: dataList.value.id });
          if (res.code == 10000) {
            await second();
            showToast("报名成功");
          }
        } catch (error) {}
      }
    }
  );
};
const ClickMore = async () => {
  // form.value.page_no++;
  if (state.count != userExt.value.length) {
    form.value.page_no++;
    showLoading("加载中");
    await init();
  } else {
    showToast("已经最后一页了~");
  }
};
const ClickUserExt = async (e) => {
  uni.navigateTo({
    url: `/pages/user/mycomponinfo?company_type=1&id=${e.wechat_user_id}`,
  });
  // uni.navigateTo({
  //   url: `/pages/user/mycomponinfo?company_type=2&id=${e.wechat_user_id}`,
  // });
};
</script>

<style lang="scss" scoped>
/* 全局容器样式 */
.recruitment-detail {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

/* 1. 顶部导航栏 */
.detail-header {
  margin-left: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  // position: fixed;
  // top: 0;
  // left: 0;
  // right: 0;
  // z-index: 99;
  // box-sizing: border-box;

  .back-icon {
    cursor: pointer;
  }

  .header-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }

  .header-empty {
    width: 32rpx; // 与返回图标宽度一致，保持标题居中
  }
}

/* 2. 滚动容器 */
.detail-scroll {
  margin-top: 88rpx; // 避开顶部导航栏
  overflow-y: auto;
  box-sizing: border-box;
}

/* 3. 内容区域 */
.detail-content {
  padding: 24rpx 30rpx 120rpx; // 底部留空，避开操作按钮
  box-sizing: border-box;
}

/* 3.1 基础信息卡片 */
.base-info-card {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);

  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24rpx;
    font-size: 26rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .info-label {
      color: #666;
      min-width: 180rpx; // 固定标签宽度，对齐更整齐
    }

    .info-value {
      color: #333;
      flex: 1; // 内容区自适应宽度
      line-height: 1.5;
    }

    // 状态标签样式
    .status-tag {
      padding: 6rpx 16rpx;
      border-radius: 16rpx;
      font-size: 22rpx;
      font-weight: 400;

      &.status-active {
        background-color: rgba(74, 144, 226, 0.1);
        color: #4a90e2;
      }
      &.status-error {
        background-color: rgb(255 5 5);
        color: white;
      }
      &.status-inactive {
        background-color: rgba(153, 153, 153, 0.1);
        color: #999;
      }
    }

    // 关键词标签容器
    .tags-container {
      align-items: center;
    }
  }
}

/* 3.2 内容标题 */
.content-title {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;

  text {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-right: 16rpx;
  }

  .title-line {
    flex: 1;
    height: 2rpx;
    background-color: #eee;
  }
}

/* 3.3 富文本容器 */
.rich-text-container {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);

  // 优化u-parse内部样式：图片自适应、文本行高
  :deep(.u-parse) {
    line-height: 1.8;
    font-size: 26rpx;
    color: #333;

    // 图片样式：宽度100%，避免溢出
    img {
      width: 100% !important;
      height: auto !important;
      border-radius: 16rpx;
      margin: 20rpx 0;
    }

    // 段落样式：上下间距
    p {
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/* 3.4 底部操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx; // 标签间距
  flex: 1;
  .tag-item {
    padding: 8rpx 20rpx;
    background-color: #f0f5ff;
    color: #4a90e2;
    border-radius: 16rpx;
    font-size: 22rpx;
  }
}
</style>
